<template>
  <div class="detail-wrap">
    <div v-tit="'对接场景信息'">
      <GForm ref="form" :config="formConfig" inline disabled v-model="form"></GForm>
    </div>
    <div v-tit="'SQL配置'">
      <GTable ref="table" api="/v1/edi/PlApiMappingConfig/selectPlApiMappingConfigList" :apiParams="apiParams" :columnSource="baseColumns" :cbFun="cbFun" :otherHeight="150"
        :tmsShowFilter="false" :searchBox="false" @head-btn-click="handleAdd" @edit="edit" @delete="del" />
    </div>

    <!-- <div class="footer">
      <el-button type="primary" @click="handleConfirm()">确定</el-button>
      <el-button @click="$router.push('/app/apiScene')">取消</el-button>
    </div> -->

    <el-dialog :title="dialogModule.title" :visible.sync="dialogModule.flag" center v-dialogDrag width="720px" @closed="closed">
      <div v-tit="'自定义逻辑'">
        <GForm ref="detailInfo" label-width="150px" :config="detailFormConfig" :rules="formRules" v-model="detailForm"></GForm>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="handleConfirm">确定</el-button>
        <el-button @click="closed()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'logic',
  data() {
    return {
      form: {
        id: null,
        apiMappingName: null,
        applicationLinkName: null,
        applicationLinkDtlName: null,
        remark: null
      },
      detailForm: {
        queryName: '',
        querySql: '',
        queryResultName: '',
        queryColumnMainValue: '',
        queryRoot: ''
      },
      queryColumnForm: [{ key: '', value: '' }],
      dialogModule: {
        flag: false,
        title: '',
        type: null,
        data: null,
        loading: false
      }
    }
  },
  computed: {
    formConfig() {
      return [
        {
          label: '对接场景',
          prop: 'apiMappingName',
          type: 'input'
        },
        {
          label: '应用关联',
          prop: 'applicationLinkName',
          type: 'input'
        },
        {
          label: '应用环境',
          prop: 'applicationLinkDtlName',
          type: 'input'
        },
        {
          label: '备注',
          prop: 'remark',
          type: 'textarea'
        }
      ]
    },
    baseColumns() {
      return [
        {
          label: '选配过程名称',
          prop: 'A',
          input: 'input'
        },
        {
          label: '执行顺序',
          prop: 'A',
          type: 'input'
        },
        {
          label: '是否强制执行逻辑',
          prop: 'A',
          type: 'input'
        },
        {
          label: '操作',
          prop: 'action',
          input: 'action',
          btnConfig: [
            {
              label: '修改',
              invalid: 'edit',
              type: 'primary'
              // permi: ['timeTask:pause'],
              // disabled: data => data.triggerState != 'WAITING'
            },
            {
              label: '删除',
              invalid: 'delete',
              type: 'warning'
              // permi: ['timeTask:pause'],
              // disabled: data => data.triggerState != 'WAITING'
            }
          ],
          headBtn: {
            label: '新增',
            type: 'primary'
          }
        }
      ]
    },
    detailFormConfig() {
      return [
        {
          label: '自定义过程名称',
          prop: 'B',
          type: 'select',
          options: [
            { label: '出库单外部变更01', value: 'default' },
            { label: '出库单外部变更02', value: 'request' },
            { label: '出库单外部变更03', value: 'mapping'}
          ]
        },
        {
          label: '执行顺序',
          prop: 'A',
          type: 'input'
        },
        {
          label: '是否强制执行',
          prop: 'A',
          type: 'select',
          options: [
            { label: '是', value: 'default' },
            { label: '否', value: 'request' }
          ]
        }
      ]
    },
    formRules() {
      return {
        queryName: [
          {
            required: true,
            message: '请填写查询名称',
            trigger: 'blur'
          }
        ],
        querySql: [
          {
            required: true,
            message: '请填写查询SQL',
            trigger: 'blur'
          }
        ],
        queryResultName: [
          {
            required: true,
            message: '请填写查询结果名称',
            trigger: 'blur'
          }
        ],
        queryColumnMainValue: [
          {
            required: true,
            message: '请填写查询结果主要字段',
            trigger: 'blur'
          }
        ],
        queryRoot: [
          {
            required: true,
            message: '请填写查询条件根节点',
            trigger: 'blur'
          }
        ]
      }
    },
    apiParams() {
      return { apiMappingId: this.$route.query.id }
    }
  },
  methods: {
    del(data) {
      this.$confirm('此操作将删除sql配置, 是否继续?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$post(
            '/v1/edi/PlApiMappingConfig/deletePlApiMappingConfigId',
            data
          ).then(res => {
            this.$message.success(res.returnMgr)
            this.getTableData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleConfirm() {
      const params = this._.cloneDeep(this.detailForm)
      params.apiMappingId = this.$route.query.id
      let promise = null
      if (this.dialogModule.type == 'add') {
        promise = this.$post(
          '/v1/edi/PlApiMappingConfig/addPlApiMappingConfig',
          params
        )
      } else {
        promise = this.$post(
          '/v1/edi/PlApiMappingConfig/editPlApiMappingById',
          params
        )
      }
      promise.then(res => {
        this.$message.success(res.returnMgr)
        this.getTableData()
        this.closed()
        this.dialogModule.flag = false
      })
    },
    handleAdd() {
      this.dialogModule.title = 'sql配置新增'
      this.dialogModule.type = 'add'
      this.dialogModule.flag = true
    },
    edit(data) {
      this.dialogModule.title = 'sql配置信息'
      this.dialogModule.type = 'edit'
      this.detailForm = data
      this.dialogModule.flag = true
    },
    handleDel(item) {
      const index = this.queryColumnForm.findIndex(
        f => f.key == item.key && f.value == item.value
      )
      this.queryColumnForm.splice(index, 1)
    },
    closed() {
      this.$refs.detailInfo?.resetFields()
      this.dialogModule.flag = false
    },
    cbFun(res) {
      return { list: res.data.page.records, total: res.data.page.total }
    },
    async getTableData() {
      this.$refs.table.getTableData()
    },
    getInfoById() {
      this.$post('/v1/edi/PlApiMapping/selectPlApiMappingById', {
        id: this.$route.query.id
      }).then(res => {
        this.form = { ...this.form, ...res.data.item }
      })
      this.$post('/v1/edi/PlApiMappingConfig/selectPlApiMappingConfigById', {
        id: this.$route.query.id
      }).then(res => {
        this.detailForm = { ...this.detailForm, ...res.data.item }
      })
    }
  },
  mounted() {
    this.getInfoById()
  }
}
</script>

<style lang="scss" scoped>
.detail-wrap {
  height: 100%;
  position: relative;
  .query-column-form {
    padding-top: 10px;
    overflow: auto;
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #f4f4f4;
    text-align: center;
    padding: 10px 0;
  }
}
</style>
